<template>
	<view class="datadetail" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
		<view class="title">
			<text>点位数据详情</text>
		</view>
		<view class="main">
			<view class="adress">
				<text style="color:#fff;">监测点位</text>
				<text style="overflow:hidden;text-overflow:ellipsis;width:240px;white-space: nowrap;">{{ datadetailinfo.stationName }}</text>
			</view>
		</view>
		<uni-collapse accordion style="border:none;display: flex;flex-direction: column;flex: 1;" change="color:bule" class="screeninfo">
			<uni-collapse-item title="泥位" style="background-color: #124699;color:#009ff1;" thumb="../../../static/image/icon_mud.png">
				<div class="selectscreenMud" style="flex-direction: column;display:flex;justify-content: center;align-items: center;margin-bottom: 30px;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<text style="font-size: 12px;margin-left: 15px;color: #fff;">泥位每小时变化</text>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<text class="SbName">设备名称：</text>
						</view>
					</view>

					<view class="qiun-columns">
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineMud" id="canvasLineMud" class="charts" @touchstart="touchLineMud"></canvas>
						</view>
					</view>
				</div>
			</uni-collapse-item>
			<uni-collapse-item style="margin:3px 0;background: #124699;color:#009ff1" title="雨量" thumb="../../../static/image/icon_rainfull.png">
				<div class="selectscreenRainfall" style="flex-direction: column;display:flex;justify-content: center;align-items: center;margin-bottom: 30px;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<text style="font-size: 12px;margin-left: 15px;color: #fff;">雨量每小时变化</text>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<text class="SbName">设备名称：</text>
						</view>
					</view>
					<view class="qiun-columns">
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineRainfall" id="canvasLineRainfall" class="charts" @touchstart="touchLineRainfall"></canvas>
						</view>
					</view>
				</div>
			</uni-collapse-item>
			<uni-collapse-item title="位移" style="background: #124699;color:#009ff1" thumb="../../../static/image/icon_displacement.png">
				<div class="selectscreenDisplacement" style="flex-direction: column;display:flex;justify-content: center;align-items: center;margin-bottom: 30px;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<text style="font-size: 12px;margin-left: 15px;color: #fff;">位移每小时变化</text>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<text class="SbName">设备名称：</text>
						</view>
					</view>
					<view class="qiun-columns">
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineDisplacement" id="canvasLineDisplacement" class="charts" @touchstart="touchLineDisplacement"></canvas>
						</view>
					</view>
				</div>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import uCharts from "@/components/u-charts/u-charts.js";
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
	import {
		ajax
	} from "../../../api/apis";
	export default {
		data() {
			return {
				datadetailinfo: {},
				monitoringPositionID: "",
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '成交量A',
						data: [35, 20, 25, 37, 4, 20],
						color: '#000000'
					}]
				},
				chartData1: {},
				chartData2: {},
				chartData3: {},
				deviceNiWei: [],
				deviceYuL: [],
				deviceWeiYi: []
			};
		},
		components: {
			uniCollapse,
			uniCollapseItem
		},
		methods: {
			onLoad: function(option) {
				let _this = this;
				console.log(option.monitoringPositionID);
				this.monitoringPositionID = option.monitoringPositionID;
				ajax({
					url: "/monitoringPosition/getMonitoringPositionInfo?monitoringPositionID=" + _this.monitoringPositionID,
					method: "POST",
					success: res => {
						_this.datadetailinfo = res.data.data;
						// console.log(res.data.data)
					}
				});
				ajax({
					url: "/mudlevelMonitoring/getMudlevelMonitoringGroupByHour?monitoringDeviceID=" + _this.monitoringPositionID,
					method: "POST",
					success: res => {
						// console.log(res)
						let MudlevelObj = res.data.data;
						// console.log(MudlevelObj)
						let categories = MudlevelObj.name;
						let series1 = [{
							name: '泥位',
							data: [],
							color: '#DE7C40'
						}]

						series1.forEach(item => {
							series1[0].data = MudlevelObj.value;
						});

						_this.chartData1['categories'] = categories;
						_this.chartData1['series'] = series1;
						// console.log(_this.chartData1);
						_this.chatrsMud();
					}
				});
				ajax({
					url: "/rainfallMonitoring/getRainfallMonitoringGroupByHour?monitoringDeviceID=" + _this.monitoringPositionID,
					method: "POST",
					success: res => {
						// console.log(res)
						let RainfallObj = res.data.data;
						// console.log(RainfallObj)
						let categories = RainfallObj.name;
						let series2 = [{
							name: '雨量',
							data: [],
							color: '#00E5D1'
						}]

						series2.forEach(item => {
							series2[0].data = RainfallObj.value;
						});

						_this.chartData2['categories'] = categories;
						_this.chartData2['series'] = series2;
						// console.log(_this.chartData2);
						_this.chatrsRainfall();
					}
				});
				ajax({
					url: "/surfaceDisplacementMonitoring/getSurfaceDisplacementMonitoringGroupByHour?monitoringDeviceID=" + _this.monitoringPositionID,
					method: "POST",
					success: res => {
						// console.log(res)
						let MudlevelObj = res.data.data;
						// console.log(MudlevelObj)
						let categories = MudlevelObj.name;
						let series3 = [{
							name: '位移X',
							data: [],
							color: '#000'
						}, {
							name: '位移Y',
							data: [],
							color: '#FF7F00'
						}, {
							name: '位移Z',
							data: [],
							color: '#0098E8'
						}]

						series3.forEach(item => {
							series3[0].data = MudlevelObj.value_X;
							series3[1].data = MudlevelObj.value_Y;
							series3[2].data = MudlevelObj.value_Z;
						});

						_this.chartData3['categories'] = categories;
						_this.chartData3['series'] = series3;
						// console.log(_this.chartData3);
						_this.chatrsDisplacement();
					}
				});
				ajax({
					url: "/monitoringDevice/getMonitoringDeviceInfo2ListByMonitoringPositionID?monitoringPositionID=" + _this.monitoringPositionID,
					method: "POST",
					success: res => {
						console.log(res)
						_this.deviceNiWei = res.data.data.filter(item => item.monitoringDeviceTypeName == "泥位")
						_this.deviceYuL = res.data.data.filter(item => item.monitoringDeviceTypeName == "降雨")
						_this.deviceWeiYi = res.data.data.filter(item => item.monitoringDeviceTypeName == "位移")
					}
				})
			},
			touchLineMud(e) {
				canvaLineMud.showToolTip(e, {
					format: function(item, category) {
						return category + " " + item.name + ":" + item.data;
					}
				});
			},
			touchLineRainfall(e) {
				canvaLineRainfall.showToolTip(e, {
					format: function(item, category) {
						return category + " " + item.name + ":" + item.data;
					}
				});
			},
			touchLineDisplacement(e) {
				canvaLineDisplacement.showToolTip(e, {
					format: function(item, category) {
						return category + " " + item.name + ":" + item.data;
					}
				});
			},
			chatrsMud() {
				let _this = this;
				let canvaLineMud = new uCharts({
					$this: _this,
					canvasId: 'canvasLineMud',
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: _this.chartData1.categories,
					series: _this.chartData1.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#fff',
						gridType: 'none',
						dashLength: 8,
						disabled: false,
						disableGrid: true
					},
					yAxis: {
						gridType: 'none',
						gridColor: '#fff',
						dashLength: 8,
						splitNumber: 5,
						disabled: false,
						disableGrid: true,
						min: 0,
						max: 50,
					},
					width: uni.upx2px(660),
					height: uni.upx2px(240),
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			chatrsRainfall() {
				let _this = this;
				let canvaLineRainfall = new uCharts({
					$this: _this,
					canvasId: 'canvasLineRainfall',
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: _this.chartData1.categories,
					series: _this.chartData1.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#fff',
						gridType: 'none',
						dashLength: 8,
						disabled: false,
						disableGrid: true
					},
					yAxis: {
						gridType: 'none',
						gridColor: '#fff',
						dashLength: 8,
						splitNumber: 5,
						disabled: false,
						disableGrid: true,
						min: 0,
						max: 20,
					},
					width: uni.upx2px(660),
					height: uni.upx2px(240),
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			chatrsDisplacement() {
				let _this = this;
				let canvaLineDisplacement = new uCharts({
					$this: _this,
					canvasId: 'canvasLineDisplacement',
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: _this.chartData1.categories,
					series: _this.chartData1.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#fff',
						gridType: 'none',
						dashLength: 8,
						disabled: false,
						disableGrid: true
					},
					yAxis: {
						gridType: 'none',
						gridColor: '#fff',
						dashLength: 2,
						splitNumber: 5,
						disabled: false,
						disableGrid: true,
						min: 0,
						max: 1,
					},
					width: uni.upx2px(660),
					height: uni.upx2px(240),
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			}
		},
		onPullDownRefresh() {
			// this.onLoad();
			if (timer != null) {
				clearTimeout(timer);
			}
			let timer = setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		mounted() {
			let _this = this
			// this.chatrsMud();
			// this.chatrsRainfall();
			// this.chatrsDisplacement();
			// this.getMudLevel();
		}
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	.datadetail {
		height: 100%;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 16px;
		padding: 15px;
		color: #fff;
		text-align: center;
		background: url("../../../static/image/navbg.png") no-repeat center;
	}

	.SbName {
		color: #009FF1;
		font-size: 12px;
		padding-right: 20px;
	}

	.adress,
	.depart,
	.reportuser,
	.reporttime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		/* background-color: #fff; */
		margin-bottom: 5px;
		padding: 15px 30px;
		font-size: 12px;
		color: #009ff1;
		text-align: right;
	}

	.imginfo,
	.vidioinfo {
		padding: 15px 30px;
		line-height: 24px;
		/* background: #fff; */
	}

	.imginfo {
		display: flex;
		flex-direction: column;
		margin-bottom: 5px;
	}

	.screeninfo>>>.uni-collapse-cell__title-img[data-v-05a53ffd] {
		width: 20px;
		height: 20px;
	}

	.uni-collapse[data-v-b183f2e2] {
		background: none;
	}

	.screeninfo>>>.uni-collapse-cell__title-text[data-v-05a53ffd] {
		font-size: 14px;
	}

	.vidioinfo {
		display: flex;
		flex-direction: column;
	}

	/* 图表 */
	.qiun-charts {
		width: 660upx;
		height: 200upx;
		/* background-color: #ffffff; */
	}

	.charts {
		width: 660upx;
		height: 200upx;
		/* background-color: #ffffff; */
	}
</style>
